<!--平台酒水管理-->
<div class="search">
  <nz-select style="width:100px;" [(ngModel)]="status" nzAllowClear nzPlaceHolder="酒饮状态" (ngModelChange)="searchData()">
    <nz-option *ngFor="let item of statuslist" [nzValue]="item.key" [nzLabel]="item.value"></nz-option>
  </nz-select>
  <nz-select style="width:100px;" [(ngModel)]="type" nzAllowClear nzPlaceHolder="酒饮类型" (ngModelChange)="searchData()">
    <nz-option *ngFor="let item of typelist2" [nzValue]="item.key" [nzLabel]="item.value"></nz-option>
  </nz-select>
  <nz-input-group nzSuffixIcon="anticon anticon-search" style="width:55%;margin-left:1rem;">
    <input type="text" nz-input placeholder="输入酒水名称" [(ngModel)]="name" (keyup.enter)="searchData()">
  </nz-input-group>
  <a (click)="searchData()">查询</a>
  <a (click)="add()">添加</a>
</div>

<nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzLoading]="loading"
  [nzTotal]="total" [nzShowTotal]="totalTemplate" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize"
  (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)" [nzScroll]="{ x:'1200px',y: '400px' }">
  <thead>
    <tr>
      <th nzWidth="60px" nzLeft="0px">序号</th>
      <th nzWidth="80px">图片</th>
      <th nzWidth="150px">名称</th>
      <th nzWidth="80px">类型</th>
      <th nzWidth="80px">香型</th>
      <th nzWidth="80px">酒精度</th>
      <th nzWidth="80px">容量</th>
      <th nzWidth="100px">价格(元/瓶)</th>
      <th nzWidth="100px">规格(瓶/箱)</th>
      <th nzWidth="100px">酒币抵扣数(个)</th>
      <th nzWidth="120px">更新时间</th>
      <th nzWidth="120px" nzRight="0px">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;index as i">
      <td nzLeft="0px">{{i+1}}</td>
      <td> <img *ngIf="data.img" [src]="data.img" class="avatar" style="width: 50px; height:50px;"></td>
      <td>{{data.winename}}</td>
      <td>{{data.typename}}</td>
      <td>{{data.Aroma}}</td>
      <td>{{data.Alcohol}}</td>
      <td>{{data.capacity}}</td>
      <td>{{data.price}}</td>
      <td>{{data.specs}}</td>
      <td>{{data.num}}</td>
      <td>{{data.updateTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
      <td nzRight="0px">
        <a *ngIf="data.status==1" (click)="lock(data._id)" title="下架">下架</a>
        <a *ngIf="data.status==0" (click)="open(data._id)" title="上架">上架</a>
        <a (click)="edit(data)" title="编辑">编辑</a>
        <a (click)="delete(data._id)" title="删除">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #totalTemplate let-total>
  共 {{total}} 条
</ng-template>

<nz-modal [(nzVisible)]="isVisible" nzTitle="酒水信息" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  nzWrapClassName="vertical-center-modal" [nzMaskClosable]="false" nzWidth="600">
  <div class="scrollbar">
    <nz-input-group nzAddOnBefore="名称">
      <input type="text" nz-input [(ngModel)]="doc.winename">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="价格(元/瓶)">
      <input type="text" nz-input [(ngModel)]="doc.price">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="香型">
      <input type="text" nz-input [(ngModel)]="doc.Aroma">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="容量">
      <input type="text" nz-input [(ngModel)]="doc.capacity">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="酒精度">
      <input type="text" nz-input [(ngModel)]="doc.Alcohol">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="类型">
      <nz-select style="width:300px;" [(ngModel)]="doc.type">
        <nz-option *ngFor="let item of typelists" [nzValue]="item.key" [nzLabel]="item.value"></nz-option>
      </nz-select>
    </nz-input-group>
    <nz-input-group nzAddOnBefore="规格(瓶/箱)">
      <nz-input-number [(ngModel)]="doc.specs" [nzMin]="1" [nzMax]="100" [nzStep]="1"></nz-input-number>
    </nz-input-group>
    <nz-input-group nzAddOnBefore="酒币抵扣数(个)">
      <nz-input-number [(ngModel)]="doc.num" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
    </nz-input-group>
    <li><span>图片：</span>
      <p>
        <nz-upload class="avatar-uploader" [nzAction]="action" nzName="file" nzListType="picture-card" title="点击上传图片"
          [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" (nzChange)="pichandleChange($event,'firstimg')">
          <ng-container *ngIf="!doc.img">
            <i nz-icon type="plus"></i>
            <div class="ant-upload-text">上传图片</div>
          </ng-container>
          <img *ngIf="doc.img" [src]="doc.img" class="avatar" style="width: 300px; height:300px;">
        </nz-upload>
      </p>
    </li>
    <nz-input-group nzAddOnBefore="排序">
      <input type="text" nz-input [(ngModel)]="doc.order">
    </nz-input-group>
  </div>
</nz-modal>